TextInput কম্পোনেন্ট React Native-এ ব্যবহারকারীর ইনপুট গ্রহণ করার জন্য ব্যবহৃত হয়। এটি টেক্সট বক্স হিসেবে কাজ করে এবং ব্যবহারকারী কিবোর্ডের মাধ্যমে কিছু ইনপুট প্রদান করতে পারে।
নিচে TextInput কম্পোনেন্টের ব্যবহার এবং ইউজার ইনপুট সংগ্রহের একটি উদাহরণ দেওয়া হলো।
TextInput কম্পোনেন্টের ব্যবহার
React Native এর TextInput কম্পোনেন্টের মাধ্যমে আপনি ব্যবহারকারীর ইনপুট গ্রহণ করতে পারেন এবং সেই ইনপুটকে স্টেটের মধ্যে সংরক্ষণ করতে পারেন। এর জন্য, আমরা সাধারণত state ব্যবহার করে ইনপুটের মানটি ধারণ করি এবং onChangeText বা onChange ইভেন্টের মাধ্যমে এটি আপডেট করি।
উদাহরণ:
import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
const MyComponent = () => {
// State to hold the input value
const [inputValue, setInputValue] = useState('');
// Function to handle input change
const handleInputChange = (text) => {
setInputValue(text);
};
// Function to handle submit
const handleSubmit = () => {
alert(`User input: ${inputValue}`);
};
return (
<View style={{ padding: 20 }}>
<Text style={{ fontSize: 18 }}>Enter some text:</Text>
{/* TextInput to collect user input */}
<TextInput
style={{
height: 40,
borderColor: 'gray',
borderWidth: 1,
marginBottom: 20,
paddingLeft: 10,
}}
placeholder="Type something here"
value={inputValue} // Binding the input value to state
onChangeText={handleInputChange} // Updating the state when text changes
/>
{/* Button to submit */}
<Button title="Submit" onPress={handleSubmit} />
</View>
);
};
export default MyComponent;ব্যাখ্যা:
- State Management:
useStateহুক ব্যবহার করে একটিinputValueস্টেট তৈরি করা হয়েছে, যা TextInput এর ইনপুট মান ধারণ করবে।setInputValueফাংশন ব্যবহার করে ইনপুট পরিবর্তন হলে স্টেট আপডেট হয়।
- TextInput কম্পোনেন্ট:
value={inputValue}: TextInput এর মানকেinputValueস্টেটের সাথে বাঁধা (bind) করা হয়েছে, যার মানে হচ্ছে যখন ইনপুট পরিবর্তিত হবে, তখন সেটি স্টেটেও আপডেট হবে।onChangeText={handleInputChange}: যখন ব্যবহারকারী টেক্সট ইনপুট পরিবর্তন করবেন, তখনhandleInputChangeফাংশন কল হবে এবং এটিinputValueস্টেট আপডেট করবে।
- Button:
- একটি Button ব্যবহার করে ব্যবহারকারী যখন "Submit" বাটনে ক্লিক করবেন, তখন handleSubmit ফাংশন চালু হবে, যা
inputValueস্টেটের মানকে একটিalertদিয়ে প্রদর্শন করবে।
- একটি Button ব্যবহার করে ব্যবহারকারী যখন "Submit" বাটনে ক্লিক করবেন, তখন handleSubmit ফাংশন চালু হবে, যা
TextInput এর অন্যান্য গুরুত্বপূর্ণ প্রোপার্টি:
- placeholder: টেক্সট ইনপুট ফিল্ডে যখন কোনো টেক্সট নেই, তখন একটি নির্দেশিকা টেক্সট দেখানোর জন্য ব্যবহৃত হয়।
- secureTextEntry: এটি টেক্সট ইনপুট ফিল্ডে নিরাপদ ইনপুট (যেমন পাসওয়ার্ড) প্রদর্শন করতে ব্যবহৃত হয়।
- keyboardType: এটি ব্যবহারকারীর কিবোর্ডের ধরণ নির্ধারণ করতে ব্যবহৃত হয় (যেমন, numeric, email-address, default ইত্যাদি)।
- multiline: এটি দিয়ে আপনি একাধিক লাইনে ইনপুট নিতে পারেন।
- autoFocus: এটি ইনপুট ফিল্ডে অটোফোকাস করতে ব্যবহৃত হয়।
উদাহরণ:
<TextInput
secureTextEntry={true}
placeholder="Enter your password"
style={{ height: 40, borderColor: 'gray', borderWidth: 1, marginBottom: 20 }}
/>সারাংশ
React Native এর TextInput কম্পোনেন্ট ব্যবহার করে আপনি ব্যবহারকারীর ইনপুট সহজেই সংগ্রহ করতে পারেন। value এবং onChangeText প্রোপার্টি ব্যবহার করে ইনপুটের মান স্টেটে সংরক্ষণ করা হয় এবং ব্যবহারকারী যেকোনো পরিবর্তন করলে সেটি স্টেটের মাধ্যমে আপডেট হয়। এতে ইনপুট ফিল্ডে টেক্সট প্রবাহ এবং তা প্রক্রিয়াকরণের প্রক্রিয়া খুব সহজ হয়।
Read more
